<template>
    <div class="list">
        <ul class="mui-table-view">
        <li @click="goDeatil(site.docid)" v-for="site in sites" :key="site.key" class="mui-table-view-cell mui-media news-item" >
          <a href="javascript:;">
              <img  class="mui-media-object mui-pull-left" :src="site.imgsrc">
              <div class="mui-media-body">
                    {{ site.title }}
                  <p class='mui-ellipsis-2'>{{site.digest}}</p>
              </div>
          </a>
        </li>
      </ul>
    </div>
</template>
<script>
export default {
  data() {
   return {
      sites: [
      ]
    } 
  },
  computed:{
    
  },
  mounted() {
    this.loadData();
  },
   methods:{
     loadData(){
      this.$axios.get('/nc/article/headline/T1348647853363/0-40.html')
        .then(response => {
          // console.log(response.data.T1348647853363);
          this.$store.commit("SET_NEWS_LIST", response.data.T1348647853363)
          this.sites = response.data.T1348647853363
        })
        .catch(function (error) {
          console.log(error);
        });
     },
     goDeatil(docid){
       console.log(docid);
        this.$router.push({name:'newsDetail',params:{docid} })
     }
   }
  
}
</script>
<style scoped>
  .news-item {
    margin: 10px 5px;
  }
  .mui-table-view .mui-media-object {
    /* line-height: 42px; */
    max-width: 96px;
    height: 60px;
  }
  .mui-table-view {
    margin-top: 60px;
    margin-bottom: 60px;
  }
</style>
